<template>
	<view class="face-page">
		<lexiconNavVue :title="phone!=''?'面容比对':'面容采集'" />
		<image :src="faceResult" mode="aspectFit" />
		<view class="base64Result" :class="success || haveFace ? 'succ' : ''">
			{{result}}
		</view>
		<view class="btn" type="default" @click="checkAuth">{{ success || haveFace ? '重新采集' : '比对本人面容'}}</view>
		<view class="tip" v-if="!success">拍摄您本人面容，请确保正对手机，光线充足。</view>
		<selectContentView v-if="confirmTipShow" :msg="confirmTipMsg" :confirmTitle="confirmTipConfirmText"
			:cancelTitle="confirmTipCancelText" @confirm="confirmTipConfirm" @cancel="confirmTipCancel">
		</selectContentView>
	</view>
</template>

<script>
	const permissionUtils = require('@/common/permission.js')
	const bdFaceLive = uni.requireNativePlugin('liyahong-BDFace-v4')
	var resultBackEnable = true

	export default {
		data() {
			return {
				success: false,
				avatar: '',
				haveFace: '', // 是否已采集
				result: '',
				faceResult: require('../../../static/image/face_default1.png'),
				phone: '',
				confirmTipShow: false,
				confirmTipMsg: '',
				confirmTipConfirmText: '',
				confirmTipCancelText: '',
				userId: ''
			};
		},
		onLoad(options) {
			console.log(options)

			// uni.showToast({
			// 	title: '111111'
			// })

			let userInfo = uni.getStorageSync('USER_INFO')
			if (userInfo) {
				this.avatar = JSON.parse(userInfo).avatar
				this.haveFace = this.avatar && this.avatar !== '无'
				this.result = this.haveFace ? '已成功采集' : ''
				this.userId = JSON.parse(userInfo).id
			}

			if (options.phone) {
				this.phone = options.phone
				this.result = ''
				this.avatar = ''
			}
		},
		methods: {
			checkAuth() {
				const notFirstFace = uni.getStorageSync('notFirstFace')
				if (!notFirstFace) { // 首次登录
					this.showCameraTip()
					return
				}

				uni.getSystemInfo({
					success: (res) => {
						let type = res.osName.toLowerCase()
						if (type === 'ios') {
							let iosAuth = permision.judgeIosPermission("camera")
							if (iosAuth) {
								this.scan()
							} else {
								this.showCameraTip()
							}
						} else if (type === 'android') {
							this.scan()
						}
					}
				});
			},
			// Android授权
			async requestAndroidPermission(permisionID) {
				console.log('permisionID====', permisionID)
				var result = await permision.requestAndroidPermission(permisionID)
				var strStatus
				console.log(result)
				if (result == 1) {
					strStatus = "已获得授权"
					this.scan()
				} else if (result == 0) {
					strStatus = "未获得授权"
					this.showCameraTip()
				} else {
					strStatus = "被永久拒绝权限"
					this.showCameraTip()
				}
				console.log('strStatus')
			},
			showCameraTip() {
				this.confirmTipShow = true
				this.confirmTipMsg = '拍摄面容需要访问您的摄像头权限'
				this.confirmTipConfirmText = '同意'
				this.confirmTipCancelText = '拒绝'
			},
			confirmTipConfirm() {
				this.confirmTipShow = false
				this.scan()
				uni.setStorageSync('notFirstFace', '1')
			},
			confirmTipCancel() {
				this.confirmTipShow = false
			},
			scan() {
				let licenseID = plus.os.name == 'Android' ? 'pczx-face-android' : 'pczx-face-ios'
				console.log(licenseID)

				if (this.phone) {
					var liveArray = [];
				} else {
					var liveArray = ['Eye', 'Mouth', 'HeadLeft', 'HeadRight'];
				}

				// 调用插件开始采集人脸
				bdFaceLive.liveFace({
						licenseID: licenseID, // 必填项，与百度资料上的License ID保持一致
						/**
						 * Eye： 眨眨眼
						 * Mouth： 张张嘴
						 * HeadLeft： 向左缓慢转头
						 * HeadRight：向右缓慢转头
						 * HeadUp：缓慢抬头
						 * HeadDown：缓慢低头
						 * 
						 * 默认无动作，如果填写了会按照指定动作执行
						 * 注意：这里跟老版的不一样，更符合用户需求
						 */
						liveArray: liveArray, // 选填【活体动作】
						liveRandom: true, // 选填【动作是否随机】，默认有序，false：有序|true：随机
						sound: 0, // 选填【是否有声】，默认有声，0：有声|1：无声
						camera: 0, // 选填【前置|后置摄像头】，默认前置，0：前置|1：后置
						openMask: true, // 选填【是否开启戴口罩采集】，默认false不开启
						hintTextColor: '#333333', // 选填【提示文字颜色】，默认#333333
						backgroundColor: '#FFFFFF', // 选填【页面背景颜色】，默认#FFFFFF
						roundColor: '#CCCCCC', // 选填【人脸采集框颜色】，默认#666666
						roundSelectColor: '#FF0000', // 选填【识别成功时采集框的颜色】，默认#FF0000
						copyright: '', // 选填【底部版权文字内容】，默认''
						copyrightColor: '#0094FF', // 选填【底部版权文字颜色】，默认#CCCCCC
						showBottomImage: false, // 选填【是否显示底部背景图片】，默认false
						otherImage: true, // 选填【是否返回动作人像信息】，默认false，true：返回base64ImageResult + otherBase64Image，false：只返回base64ImageResult
						originalImage: true, // 选填【是否返回原图照片信息】，默认false，true：返回base64ImageResult + originalBase64Image，false：只返回base64ImageResult
						/**
						 * 0：正常、1：宽松、2：严格
						 * 可以通过quality_config.json配置相关质量属性，具体属性介绍参考文档
						 */
						qualityLevel: 0, // 选填【质量等级】，默认0
						detectTimeOut: 15, // 选填【采集超时时间】，默认15，单位(秒)
						/**
						 * 如果设置为true，页面右上方会多一个相机切换功能入口
						 * 您如果想自定义图片，可以参考文档中的自定义图片说明
						 */
						switchCameraEnable: false, // 选填【是否开启相机切换功能】，默认false
						/**
						 * 如果你希望采集完成之后，需要前端处理完成之后再返回的话，可以将此属性设置为false
						 * 需注意：设置为false之后插件将不会调用关闭页面方法，需要前端手动调用插件的closeLive()方法完成关闭识别页面操作
						 */
						resultBackEnable: resultBackEnable, // 选填【采集完成之后是否返回】，默认true
						tipsModel: {}, // 选填【自定义提示文字内容】，取值可参考文档，不填则使用插件默认提示
						/**
						 * width 和 height属性是用来设置人脸采集预览画面的宽高的
						 * 
						 * 1、如果您仅用于手机端采集的话，插件内部已经对所有手机端进行了适配，此属性无需理会，直接设置0即可
						 * 2、如果您将插件用于平板设备、厂商定制机设备、快递员扫码设备可能会出现预览框人脸被拉伸的情况，
						 * 	  此时您可以来设置width 和 height属性来进行特定的适配，一般设置为width:1080，height:1920即可，
						 * 	  具体根据设备分辨率来设置
						 */
						width: 0, // 选填【自定义预览画面宽度】，默认值0
						height: 0, // 选填【自定义预览画面高度】，默认值0
						soundEnable: true, // 选填【是否显示声音图片】默认值：true
						cameraWidthRatio: 0.33, // 选填【识别框宽度比例，一般用于非手机设备，如果出现人脸框过大可以设置此属性，值越大框越小】，默认值0.33
						cameraHeightRatio: 0.1, // 选填【识别框高度比例，一般用于非手机设备，如果出现人脸框过大可以设置此属性，值越大越朝上】，默认值0.1
						translateCanvas: false, // 选填【是否交换识别框宽高，一般用于非手机设备，如果出现人脸框过大可以设置为true】，默认值false
						disableGooglePermission: false // 选填【是否禁止goole不允许的权限，需要上架google商店时设置为true】默认值：false
					},
					result => {
						/**
						 * code=1时会返回base64ImageResult
						 * 	 + 如果otherImage=true，otherBase64Image也会返回
						 * 	 + 如果originalImage=true，originalBase64Image也会返回
						 * 如果使用百度人脸比对的话建议使用base64ImageResult，这个返回的是最佳人像照片，
						 * 做百度人脸比对是完全没有问题的，也是百度官方推荐的
						 * 
						 * otherBase64Image：经过百度抠图过的人脸照片
						 * originalBase64Image：人脸采集过程中的原图照片
						 */
						console.log(result.code)
						switch (result.code) {
							case 1: // 人脸采集成功
								// 调用插件方法进行图片压缩，压缩后的图片在150KB以下
								bdFaceLive.compressBase64Image({
									base64: result.base64ImageResult, // 必填【base64数据】，直接使用插件返回的base64数据即可，不要带前缀
									compressSize: 150 // 选填【期望压缩大小】，默认值150，单位KB
								}, compressResult => {
									if (compressResult.code === 1) { // 压缩成功
										// 获取压缩结果
										const compressData = compressResult.result
										this.faceResult = `data:image/jpg;base64,${compressData.base64}`
										this.success = true

										if (this.phone) {
											this.result = '面容比对成功,正在登录...'
											this.checkResultBackEnable()
											this.faceLogin(compressData.base64)
										} else {
											this.result = '面容采集成功'
											this.checkResultBackEnable()
											this.fnSaveAvatar();
										}
									}
								})
								return
							case 2: // 跳转人脸采集页面前的回调，仅Android端支持
								break
							case -1: // 其他错误，如：licenseID没有配置等
								break
							case -2: // 面容检测超时
								this.result = '检测超时，请重试'
								break
							case -3: // 没有提取到人脸信息
								this.result = '未检测到面容，请重试'
								break
							case -4: // 用户主动关闭
								this.result = '已取消面容采集'
								break
							case -5: // 权限申请被拒绝，仅Android端支持
								if (result.never) { // 是否被永远拒绝，如果被永远拒绝需要跳转设置页让用户手动开启
									this.showModal({
										title: '权限受限',
										msg: '您拒绝了一些权限，可能导致该服务无法正常使用，请前往设置！',
										confirmText: '前往设置',
									}).then(() => {
										permissionUtils.gotoAppPermissionSetting()
									})
								} else { // 没有永远拒绝就弹窗给予提示然后再次调用插件
									this.showModal({
										title: '权限受限',
										msg: '您拒绝了一些权限，可能导致该服务无法正常使用，请授予！'
									}).then(() => {
										this.scan()
									})
								}
								break
							case 100001: // 开始初始化SDK，此处如果用户网络不佳会比较耗时，为了更好的用户体验，建议设置弹窗
								uni.showLoading({
									title: '初始化SDK...',
									mask: true
								})
								break
							case 100002: // SDK初始化完成，如果在100001开启了弹窗，可以在这里关闭
								uni.hideLoading()
								break
							default:
								this.result = '面容采集失败，请重试'
								break
						}
						console.log(JSON.stringify(result))
						// this.result = JSON.stringify(result)
					}
				)
			},

			fnSaveAvatar() {
				var that = this;
				const params = {
					base64: that.faceResult,
					user_id: that.userId
				}
				that.$http.saveAvatarInfo(params).then(res => {
					if (res.code === 200) {
						console.log('面容采集成功')
						// 重新获取用户信息（avatar）
						this.$loginSucc.getUserInfo(1)
					}
				})
			},

			faceLogin(base64) {
				var that = this;
				console.log("1-=-=-=-=-=-=-=-=-=-=-=-=-=" + that.phone)
				const params = {
					base64,
					phone: that.phone
				}
				console.log(params)
				that.$http.faceLogin(params).then(res => {
					console.log("2-=-=-=-=-=-=-=-=-=-=-=-=-=")
					console.log(JSON.stringify(res))
					if (res.code === 200) {
						that.doLogin()
					} else {
						that.result = '未完成面容对比，请使用验证码登录'
						that.success = false
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				})
			},

			doLogin() {
				var that = this;
				that.$http.appLogin({
					phone: that.phone,
					sms_code: 'face',
					login_type: 'face'
				}).then(res => {
					if (res.code === 200) {
						uni.setStorageSync('appEnterBackground', false);

						// 开关状态
						uni.setStorageSync('fayinguan_volume_status', true);
						uni.setStorageSync('yinyue_volume_status', true);
						uni.setStorageSync('yinxiao_volume_status', true);
						uni.setStorageSync('background_volume_of_menu_status', true);
						uni.setStorageSync('background_volume_of_rank_status', true);
						uni.setStorageSync('background_volume_of_game_status', true);

						// 音量大小
						uni.setStorageSync('fayinguan_volume_value', 0.7);
						uni.setStorageSync('yinyue_volume_value', 0.5);
						uni.setStorageSync('yinxiao_volume_value', 0.5);
						uni.setStorageSync('background_volume_of_menu', 0.5);
						uni.setStorageSync('background_volume_of_rank', 0.5);
						uni.setStorageSync('background_volume_of_game', 0.1);

						that.$loginSucc.setToken(res.data)
						that.$loginSucc.getUserInfo()
					} else {
						that.Showboxval = ''
						that.isFocus = true;
					}
				})
			},


			logResult(result) {
				// 最佳人像信息
				console.log('base64', result.base64ImageResult)
				// 百度抠图的人像信息
				const otherBase64 = result.otherBase64Image
				if (otherBase64) {
					for (const key in otherBase64) {
						console.log(key, otherBase64[key])
					}
				}
				// 原图人像信息
				const originalBase64 = result.originalBase64Image
				if (originalBase64) {
					for (const key in originalBase64) {
						console.log(key, originalBase64[key])
					}
				}
			},
			checkResultBackEnable() {
				// 如果resultBackEnable设置为false后，采集完成之后不会主动关闭识别页面
				if (resultBackEnable === false) {
					// 模拟网络请求，5s之后自动关闭
					let number = 5
					const intervalId = setInterval(() => {
						if (number <= 1) {
							clearInterval(intervalId)
							/**
							 * 调用插件方法，关闭识别页面
							 */
							bdFaceLive.closeLive((result) => {
								console.log(result)
							})
						} else {
							number--
						}
					}, 1000)
				}
			},
			/**
			 * 显示弹窗提示
			 */
			showModal({
				title,
				msg,
				confirmText
			}) {
				return new Promise((resolve, reject) => {
					uni.showModal({
						title,
						content: msg,
						showCancel: true,
						confirmText: confirmText || '确认',
						success(res) {
							if (res.confirm) {
								resolve()
							} else {
								reject()
							}
						},
						fail() {
							reject()
						}
					})
				})
			}
		}
	};
</script>

<style lang="scss">
	.face-page {
		text-align: center;
		padding-top: 100px;
		background: #fff8e1;
		height: 100vh;
	}

	image {
		width: 100px;
		height: 100px;
	}

	.base64Result {
		margin-top: 32upx;
		font-size: 16px;
		font-weight: bold;
		word-wrap: break-word;
		color: #f06344;
	}

	.succ {
		color: #00ac73;
	}

	.btn {
		width: 80%;
		height: 40px;
		line-height: 40px;
		margin: 40px auto 20px;
		border-radius: 40px;
		background: linear-gradient(to bottom, #ffd16b, #fff497);
		box-shadow: 0 6px 0 0 #d9b059;
		color: #000;
		font-size: 16px;
		font-family: hzgb;
	}

	.tip {
		color: #000;
		font-size: 14px;
		font-weight: bold;
	}
</style>